import React, { FC, useEffect, useLayoutEffect, useRef, useState } from 'react'
import { getBannerAPI } from '../../api/api';
import { Swiper, Image, Button } from 'antd-mobile';
import { SwiperRef } from 'antd-mobile/es/components/swiper'
import { baseURL } from '../../api/request';
import _ from 'lodash';
import { MySwipe, MySwipeItem } from '../../components/MySwipe';
import { useCommonFunc, useGetYearWeek } from '../../hooks/useCommon';
import { useCookieState, useLocalStorageState } from 'ahooks';
import MyDao from '../../components/MyDao';


const Guide:FC = () => {
  let [banners,setbanners] = useState<any>([])
  const [current,setCurrent] = useState<number>(0)
  const swipeRef = useRef<SwiperRef>(null)
  const { gotopage } = useCommonFunc()

  const options = {
    effect: 'cube',
    cubeEffect: {
        slideShadows: true,
        shadow: true,
        shadowOffset: 100,
        shadowScale: 0.6
    },
    autoplay: true,
    speed: 1000,
    loop: true,
    on: {
        slideChange: function () {
            // console.log('改变了，activeIndex为'+this.activeIndex);
            setCurrent(this.activeIndex)
        },
    },
}

  const getBannerData = async() => {
    let res:any = await getBannerAPI()
    console.log(res);
    if(res.code == "200"){
      setbanners(res.rows)
    }
  }


  // 一周看一次
  const [localWeek,setlocalWeek] = useLocalStorageState<number | undefined>("localWeek")
  const [Week] = useGetYearWeek() //当前时间

  // cookie
  // 时间过期就会自动消失 
  const [cookieWeek,setCookieWeek] = useCookieState("cookieWeek",{
    path:'/',
    expires:(()=> new Date(+new Date() + 7 * 24 * 1000 * 3600))(),
  })

  // sessionstorge
  useLayoutEffect(()=>{
    // localstorge
    // if(localWeek){  // 已经访问过了
    //   if(localWeek==Week){
    //     // 本周已经看过godie
    //     gotopage('/app')
    //     return
    //   }
    // }else{
    //   setlocalWeek(Week) // 第一次访问
    // }

    // cookie
    if(cookieWeek){  // 已经访问过了
      gotopage("/app")
      return
    }else{  // 可以访问 超过7天 
      setCookieWeek(Week)
    }
  },[])

  useEffect(()=>{
    getBannerData()
  },[])

  return (
      <div className="guide" style={{ width: '100%', height: '100vh' }}>
            {/* <Swiper 
                allowTouchMove={true} 
                ref={swipeRef} 
                onIndexChange={setCurrent}
                loop 
                autoplay={true}
                style={{width:'100%',height:'70%'}}
                >
                {
                    _.map(banners,(item:any,index:number)=>{
                        return (
                            <Swiper.Item 
                            key={index}>
                                <Image style={{width:'100%',height:'70vh'}} src={baseURL+item.advImg}></Image>
                            </Swiper.Item>
                        )
                    })
                }
            </Swiper> */}
            <MyDao size={50} color='#fff' flag={false} onEnd={()=>gotopage('/app')}></MyDao>
            <MySwipe options={options}>
              {
                _.map(banners,(item:any,index:number)=>{
                    return (
                        <MySwipeItem 
                        key={index}>
                            <Image style={{width:'100%',height:'70vh'}} src={baseURL+item.advImg}></Image>
                        </MySwipeItem>
                    )
                })
              }
            </MySwipe>
            {
              current == banners.length - 1 &&  <Button onClick={() => gotopage('/app')} color='success' style={{ margin: "50px auto", display: 'block' }}>开启智慧城市之旅</Button>
            }
      </div>
  )
}

export default Guide